<template>
  <div class="historyOrders">
    <div class="goods">

      <van-popup v-model="showGoods"
                 closeable
                 round
                 position="bottom"
                 @close="closeGoodsInfo"
                 :style="{ height: '70%'}">

        <!-- 商品信息弹出框 -->
        <div class="goodsBox">
          <div class="header_title">
            <span class="title">商品清单</span>
          </div>
          <div class="goodsInfo">
            <span>共{{goodsNum.length}}件商品</span>
          </div>
          <!-- 商品信息列表 -->
          <div class="goodsList">
            <!-- 商品信息demo -->
            <div class="goodsItem"
                 v-for="item in goodsDetailItem.imgList"
                 :key="item.id">
              <!-- <div class="goodsItem"
                 v-for="item in goodsList"
                 :key="item.num"> -->
              <!-- 左边图片 -->
              <div class="goodsItem_left">
                <img :src="item.src"
                     alt="">
              </div>
              <!-- 右边信息 -->
              <div class="goodsItem_right">
                <div class="goodsTitle">{{item.title}}</div>
                <div class="goods_desc">
                  <span>{{item.desc || '-'}}</span>
                </div>
                <div class="num_price">
                  <div>{{item.num}}</div>
                  <div>{{item.price}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 商品总价 -->
          <div class="total_price">
            <span>商品总价</span>
            <span>{{goodsDetailItem.totalPrice}}</span>
          </div>
          <!-- 配送费 -->
          <div class="run_fee">
            <span>配送费</span>
            <span>{{goodsDetailItem.fee}}</span>
          </div>
          <!-- 打包费 -->
          <div class="pack_fee">
            <span>打包费</span>
            <span>0</span>
          </div>
          <!-- 店铺满赠活动 -->
          <div class="full_gift">
            <span>店铺满赠活动</span>
            <span>满100-10，满500-50，满1000-80</span>
          </div>
          <!-- 店铺配送费减免 -->
          <div class="reduction">
            <span>店铺配送费减免</span>
            <span class="red_num">{{goodsDetailItem.reduce}}</span>
          </div>
          <!-- 店铺代金券 -->
          <div class="coupon">
            <span>店铺代金券</span>
            <span class="red_num">{{goodsDetailItem.quan}}</span>
          </div>
          <!-- 应付款 -->
          <div class="clear">
            <div class="payment_num">
              <span class="payment">应付款</span>
              <span class="p_num">{{goodsDetailItem.payMoney}}</span>
            </div>
          </div>
          <!-- 备注 -->
          <div>
            <span>备注：少油少盐</span>
          </div>
          <!-- 餐具 -->
          <div>
            <span>餐具：无需餐具</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showGoods: this.show,
      radio: '1',
      goodsNum: [],
      // goodsList: [
      //   {
      //     title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
      //     desc: ['小份', '微辣'],
      //     src: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      //     price: '188',
      //     num: 'x2'
      //   },
      //   {
      //     title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
      //     desc: ['小份', '微辣'],
      //     src: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      //     price: '1888',
      //     num: 'x8'
      //   },
      //   {
      //     title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
      //     desc: ['小份', '微辣'],
      //     src: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      //     price: '1888',
      //     num: 'x8'
      //   }
      // ]
    }
  },
  watch: {
    show (newValue, oldValue) {
      console.log(newValue, oldValue)
      this.showGoods = newValue
    },
    goodsDetailItem (newValue, oldValue) {
      console.log(newValue, oldValue)
      this.goodsNum = newValue.imgList
    }
  },
  props: ['show', 'hideGoods', 'goodsDetailItem'],
  methods: {
    closeGoodsInfo () {
      // this.show = true;
      console.log(this.showGoods)
      // this.showGoods = true
      console.log('111111')
      this.$emit('hideGoods', false)
    },
  },
}
</script>
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  // outline: solid red;
}
.header_title {
  position: static;
  top: 0;
  width: 100%;
  height: 40px;
  margin: 0px auto;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}
.goodsInfo {
  height: 30px;
  line-height: 30px;
}

.goodsTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodsBox {
  padding: 10px;
  font-size: 12px;
}
.clear {
  height: 50px;
}

.goodsItem {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.goodsItem_left {
  width: 20%;
}
.goodsItem_right {
  width: 75%;
}
.goodsItem_left img {
  width: 80px;
  height: 80px;
  border: 1px solid #999;
}
.goodsTitle,
.goods_desc,
.num_price {
  height: 30px;
  line-height: 30px;
  // margin-left: 5px;
}
.num_price {
  display: flex;
  justify-content: space-between;
}

.total_price,
.run_fee,
.pack_fee,
.full_gift,
.reduction,
.coupon {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}

.total_price span,
.run_fee span,
.pack_fee span,
.full_gift span,
.reduction span,
.coupon span {
  display: inline-block;
}

.payment_num {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 700;
  float: right;
}

.p_num {
  margin-left: 10px;
  color: #cc0000;
}

.red_num {
  color: #cc0000;
  font-size: 14px;
  font-weight: 600;
}
</style>